<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html rsf:id="html" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"/>
    <script rsf:id="scr=portal-matter" src="/library/js/headscripts.js"></script>
    <link rsf:id="scr=portal-matter" href="/library/skin/tool_base.css" type="text/css" rel="stylesheet" media="all" />
    <link rsf:id="scr=portal-matter" href="/library/skin/default-skin/tool.css" type="text/css" rel="stylesheet" media="all" />
    <title rsf:id="msg=simplepage.blti.chooser"></title>
  </head>
  <body rsf:id="scr=sakai-body">
    <div class="portletBody" id="portletBody">
      <div rsf:id="error-div" class="ui-widget">
        <div class="sak-banner-error below-link-help">
          <p><span rsf:id="error"></span></p>
          <div rsf:id="errors:">
            <p rsf:id="error-message"></p>
          </div>
        </div>
      </div>

      <h2 rsf:id="mainhead" id="mainhead"></h2>

      <div rsf:id="lti-import-notes">
        <p rsf:id="msg=simplepage.lti.import.notes"></p>
      </div>

      <a href="#" onclick="parent.closeIframe();return false;" rsf:id="blti-continue">Click Here</a>

      <div rsf:id="blti-launch:" style="margin-left:2em">
        <i class="" rsf:id="blti-import-icon"></i>
        <a href="#" target="sakai-lti-admin-iframe" onclick="showIframe(this.title, true);" rsf:id="blti-launch-link"></a>
      </div>

      <form action="#" rsf:id="blti-cancel" id="blti-cancel">
        <input type="hidden" rsf:id="csrf"/>
        <input type="hidden" rsf:id="cancel2"/>
        <input type="submit" rsf:id="cancel" id="cancel-button" class='cancelButton'/>
      </form>

      <div id="modal-iframe-div" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bltiModalLabel" aria-hidden="true">
        <div id="blti-dialog" class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="bltiModalLabel">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    <iframe name="sakai-lti-admin-iframe" id="sakai-lti-admin-iframe" src="/library/image/sakai/spinner.gif" tabindex="0"></iframe>
            </div>
          </div>
        </div>
      </div>

    </div>

    <script>
    includeLatestJQuery('LtiImportItem.html');
    </script>

    <script>
      //<![CDATA[

    function showIframe(elem, exit) {
      let title = elem;
      if ( typeof elem != 'string' ) title = $(elem).children('.blti-create-text').html();
      const mainhead = document.getElementById("mainhead").innerHTML;
      const newTitle =  mainhead + ': ' + title;
      document.getElementById("bltiModalLabel").innerHTML = newTitle;

      const el = document.getElementById("modal-iframe-div");
      const modal = bootstrap.Modal.getOrCreateInstance(el);

      el.addEventListener("shown.bs.modal", e => {
        $('#sakai-lti-admin-iframe').attr('width', $("#modal-iframe-div").width());
        $('#sakai-lti-admin-iframe').attr('height', $("#modal-iframe-div").height()-10);
      });

      el.addEventListener("hidden.bs.modal", e => {
        if ( exit ) {
           $( "#blti-cancel" ).submit();
        } else {
          $('#sakai-lti-admin-iframe').attr('src','/library/image/sakai/spinner.gif');
        }
      });
      modal.show();

      $(window).resize(function() {

        // Note that width() gives the content width, taking into consideration the border, padding, etc.
        $('#sakai-lti-admin-iframe').attr('width', $("#modal-iframe-div").width());
        $('#sakai-lti-admin-iframe').attr('height', $("#modal-iframe-div").height()-10);
      });
    }

      function closeIframe() {
        const el = document.getElementById("modal-iframe-div")
        const modal = bootstrap.Modal.getOrCreateInstance(el)
        modal.hide();
      }
      //]]>
    </script>
  </body>
</html>
